<template>
  <div class="detailWrapper">
    <div class="marked-text" v-html="markedText"></div>
    <div class="server-table">
      <div class="tabs">
        <div>
          <el-radio-group v-model="isActive" size="small">
            <el-radio-button
              v-for="item in tabMenu"
              :key="item.num"
              :label="item.num"
              >{{ item.name }}</el-radio-button
            >
          </el-radio-group>
        </div>
        <div class="tabBody" v-loading="tabLoading">
          <div v-if="isActive === '1'">
            <el-table :data="entityList" class="km-table" ref="multipleTable">
              <el-table-column
                prop="value"
                label="实体名称"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="type"
                label="所属类别"
                align="center"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="pred"
                label="置信度（%）"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
            </el-table>
            <el-pagination
              class="km-pagination"
              background
              :small="true"
              layout="total, prev, pager, next,sizes, jumper"
              :total="entityTotal"
              :hide-on-single-page="!entityTotal"
              :page-size="headFormData.page_size"
              :pager-count="7"
              :current-page="headFormData.page_index"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
          <div v-else-if="isActive === '2'">
            <el-table :data="propertyList" class="km-table">
              <el-table-column
                prop="extractionEntityName"
                label="实体名称"
                align="center"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="propertyName"
                label="属性名"
                align="center"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="propertyValue"
                label="属性值"
                align="center"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="pred"
                label="置信度（%）"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
            </el-table>
            <el-pagination
              class="km-pagination"
              background
              :small="true"
              layout="total, prev, pager, next,sizes, jumper"
              :total="propertyTotal"
              :hide-on-single-page="!propertyTotal"
              :page-size="headFormData.page_size"
              :pager-count="7"
              :current-page="headFormData.page_index"
              prev-text="上一页"
              next-text="下一页"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
          <div v-else>
            <el-table :data="relationList" class="km-table">
              <el-table-column
                prop="head"
                label="头实体"
                align="center"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="type"
                label="关系"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="tail"
                label="尾实体"
                align="center"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="pred"
                label="置信度（%）"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
            </el-table>
            <el-pagination
              class="km-pagination"
              background
              :small="true"
              layout="total, prev, pager, next,sizes, jumper"
              :total="relationTotal"
              :hide-on-single-page="!relationTotal"
              :page-size="headFormData.page_size"
              :pager-count="7"
              :current-page="headFormData.page_index"
              prev-text="上一页"
              next-text="下一页"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "acquireKnowledge",
  components: {},
  props: {
    resultId: String,
    result: {
      type: Object,
      default: () => ({
        entities: [],
        relations: [],
        tokens: [],
      }),
    },
  },
  data: () => {
    return {
      headFormData: {
        page_index: 1, // 页码
        page_size: 10, // 每页条数
      },
      entityList: [],
      propertyList: [],
      relationList: [],
      entityTotal: 0,
      propertyTotal: 0,
      relationTotal: 0,
      tabMenu: [
        {
          name: "实体",
          num: "1",
          comp: "entity",
        },
        {
          name: "属性",
          num: "2",
          comp: "property",
        },
        {
          name: "关系",
          num: "3",
          comp: "relation",
        },
      ],
      isActive: "1",
      tabLoading: false,
      markedText: "",
    };
  },
  watch: {
    isActive(value) {
      this.clickTab(value);
    },
    result(value) {
      this.formatKAInfo(value);
      this.isActive = "1";
      this.headFormData.page_index = 1;
    },
  },
  computed: {},
  created() {},
  methods: {
    formatKAInfo(result) {
      this.entityList = result.entities;
      this.relationList = result.relations;
      let text = result.tokens.join("");
      const entityArr = [];
      for (const entityItem of result.entities) {
        let value = entityItem.value;

        value = value.replace(/\s+/g, "");
        if (!entityArr.includes(value)) {
          entityArr.push(value);
        }
      }
      // 按字符串长度降序排列，保证可以嵌套标注
      entityArr.sort((a, b) => {
        return b.length - a.length;
      });

      for (let singleEntity of entityArr) {
        // 判断英文小括号
        if (singleEntity.includes("(")) {
          let leftIndex = singleEntity.indexOf("(");
          let arr = singleEntity.split("");
          arr.splice(leftIndex, 0, "\\");
          singleEntity = arr.join("");
        }
        if (singleEntity.includes(")")) {
          let leftIndex = singleEntity.indexOf(")");
          let arr = singleEntity.split("");
          arr.splice(leftIndex, 0, "\\");
          singleEntity = arr.join("");
        }
        // singleEntity=singleEntity.replace(/\(|\)/g,"")
        // 随机生成颜色（浅色系）
        var r = Math.floor(Math.random() * 128 + 127);
        var g = Math.floor(Math.random() * 127 + 127);
        var b = Math.floor(Math.random() * 127 + 127);
        var color = "#" + r.toString(16) + g.toString(16) + b.toString(16);
        text = text.replace(
          new RegExp(`${singleEntity}`, "ig"),
          "<span style='background-color: " +
            color +
            ";padding: 4px 8px' >$&</span>"
        );
      }
      this.markedText = text;
    },
    // 切换 tab 页面
    clickTab(params) {
      this.isActive = params;
      this.headFormData.page_index = 1;
    },
    // 修改当前页码
    handleCurrentChange(page) {
      this.headFormData.page_index = page;
      switch (this.isActive) {
        case "1":
          break;
        case "2":
          break;
        case "3":
          break;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.marked-text {
  margin: 20px;
  line-height: 30px;
}
.tabBody {
  margin-top: 20px;
}
</style>
